<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="theme-color" content="#fff">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="url_trust_list_error.css">
    <script src="../core/common/resources/interstitial_common.js"></script>
    <title>$i18n{title}</title>
    <script type="text/javascript">
      var MIN_GAP = 32;
      var MIN_PADDING_GAP = 48;
      var MIN_WIDTH = 188;

      function onFillErrorPageHtml() {
        mainPanel = document.getElementById('main')
        var ua = navigator.userAgent
        var isTablet = (ua.search("iphone") == -1) && (ua.search("Mobile") == -1)
        if (isTablet) {
          document.body.classList.add("hw-istablet");
          document.getElementById('hw-not-proceed').style.display = 'none';
        } else {
          document.getElementById('hw_not_proceed').style.display = 'none';
        }

        calcViewportSize();
      }

      window.addEventListener("resize", () => {
        calcViewportSize();
      }, false)

      window.onload = function() {
        onFillErrorPageHtml()
      }

      function calcViewportSize() {
        let vh = window.innerHeight * 0.09 > MIN_GAP ? window.innerHeight * 0.09 : MIN_GAP;
        document.documentElement.style.setProperty('--vh', vh + 'px');
        let ph = window.innerHeight * 0.2 > MIN_PADDING_GAP ? window.innerHeight * 0.2 : MIN_PADDING_GAP;
        document.documentElement.style.setProperty('--ph', ph + 'px');
        let vw = ((window.innerWidth - 24 * 13) / 6 + 24) > MIN_WIDTH ? ((window.innerWidth - 24 * 13) / 6 + 24) : MIN_WIDTH;
        document.documentElement.style.setProperty('--vw', vw + 'px');
      }

      function onDontProceed() {
        sendCommand(SecurityInterstitialCommandId.CMD_DONT_PROCEED);
      }
    </script>
  </head>
  <body>
    <div id="main"></div>
    <div class="hw_block_page" style="direction: $i18n{page_direction};">
      <div class="hw-content--wrap">
        <div class="hw-block-img">
          <img src="url_trust_list_error.svg" id="url_trust_block_img"/>
        </div>

        <div class="hw-block-info">
          <div class="hw-block-info__title"><p>$i18n{block_info_title}</p></div>
        </div>

        <div class="hw-block-link">
          <div class="hw-link">
            <a id="hw-not-proceed" href="#" onclick="onDontProceed()">$i18n{dontproceed}</a>
            <button id="hw_not_proceed" onclick="onDontProceed()">
              <p><span>$i18n{dontproceed}</span></p>
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
